<%@page contentType="text/html" pageEncoding="UTF-8"%>  
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<jsp:include page="header.jsp"/>   

<jsp:include page="navMenu.jsp"/> 

    <script>
        $(function() {
            var availableTags = [
            <c:forEach var="user" items="${requestScope['userList']}" >"${user.identifiant}",</c:forEach>
        ];
        $( "#partagerInput" ).autocomplete({
          source: availableTags
        });
      });
    </script>

    <div id="dialogAfficher" title="Image" style="display:none;">
        <center><img id="imageAfficher" src=""/></center>
        
        <!-- Partie d'ecriture des commentaires -->
        <p style="font-weight: bold;">Ecrire un commentaires</p>
        <div class="form-group">
            <div class="col-sm-6">
                <input type="text" id="inputCommentaire" name="ecrireCommentaire" class="form-control" placeholder="ecrireCommentaire">
            </div>
            <button id="envoyerCommentaire" type="button" class="btn btn-success">Envoyer</button> 
        </div><br/>
        
        <!-- Partie listage des commentaires -->
        <p style="font-weight: bold;">Commentaires</p>
        <div id="commentaireArea" cible="${pageContext.request.contextPath}/Commentaire?photo="></div>
    <br><br>
        

    </div>

    <div id="dialogAjouter" title="Ajouter une image" style="display:none; text-align: center;">
        <div class="upload_form_cont raw">

            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div id="dropArea">Déplacer vos photos ici</div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div class="infoFile">
                    <div>Files left: <span id="count">0</span></div>
                    <input id="url" type="hidden" value="${pageContext.request.contextPath}/ServletUploadImgs?action=uploadImgs&album=${requestScope['album']}"/>
                    <h2>Result:</h2>
                    <div id="result"></div>
                    <canvas width="250" height="20"></canvas>
                </div>
            </div>
        </div>
    </div>


    <br><br>
    <div class="centered col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
        
        <div class="pull-left col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-info" onclick="dialogAjouterImage()">Ajouter une photo <span class="glyphicon glyphicon-circle-arrow-down"></span></button>
        </div>
        <div class="pull-right col-xs-6 col-sm-6 col-md-6 col-lg-6">
            
            <div class="form-group">
                <label for="userPartage" class="col-sm-4 control-label">Partager avec : </label>
                <div class="col-sm-4">
                    <input id="partagerInput" type="text" name="userPartage" class="form-control" placeholder="userPartage">
                </div>
                <button id="partagerBtn" cible="${pageContext.request.contextPath}/Album?action=partager&idAlbum=${requestScope['album']}" type="button" class="btn btn-primary">Partager</button>
            </div>
            
                
        </div>
        
        <ul id="sortable" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            
            <c:forEach var="photo" items="${requestScope['photoList']}" >
                <li class="miniaturePhoto ui-state-default" style="color: white; background: url('${pageContext.request.contextPath}${photo.url}') no-repeat center center; background-size: cover;">
                    <div style="height: 100%;">
                        <div style="height: 80%;"></div>
                        <div style="height: 20%; background-color: rgba(0, 0, 0, 0.5);">
                            <div style="float: left; width: 65px; margin: 0px 2px;">
                                <span title="Afficher" class="glyphicon glyphicon-zoom-in" style="float: left;" onclick="afficher('${pageContext.request.contextPath}${photo.url}', ${photo.id})"></span>
                            </div>
                            <div style="float: right; width: 65px; margin: 0px 2px;">
                                <span class="glyphicon glyphicon-trash" style="float: right;" onclick="supprimer(${photo.id})"></span>
                            </div>
                        </div>
                    </div>
                </li>
            </c:forEach>
                
        </ul>
    </div>

    <script src="${pageContext.request.contextPath}/ressources/js/scriptUpload.js" type="text/javascript" ></script>
                
<jsp:include page="footer.jsp"/>   